<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1.导入echarts -->
  <script src="./echarts/echarts.min.js"></script>
</head>

<body>
  <!-- 2.写盒子 -->
  <!-- 3.给echarts准备一个定义宽高的盒子 -->
  <div id="main" style="height: 300px;width: 600px;"></div>
  <script>
    // 4.创建图表

    // 4.1基于准备好的dom 初始化eharts实例
    const myChart = echarts.init(document.querySelector('#main'))

    // 4.2图标样式 指定图表的配置和数据
    const option = {
      // 鼠标移入的提示
      tooltip: {
        trigger: 'axis',
        position: function (pt) {
          return [pt[0], '20%'];
        }
      },
      // 主标题
      title: {
        left: '20',
        text: '2021全学科薪资走势'
      },
      //右上工具栏
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          restore: {},
          saveAsImage: {}
        }
      },

      // x轴 必须的元素
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
      },
      // y轴 必须属性
      yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
      },
      // 下方拉动栏
      // dataZoom: [
      //   {
      //     type: 'inside',
      //     start: 0,
      //     end: 10
      //   },
      //   {
      //     start: 0,
      //     end: 10
      //   }
      // ],
      // 内容的数据
      series: [{
        name: '薪资走势',
        // 图表类型
        type: 'line',
        // 圈圈大小
        symbolSize: 8,
        // 圈圈类型
        symbol: 'emptyCircle',
        sampling: 'lttb',
        itemStyle: {
          color: 'rgb(40, 136, 239)'
        },
        // 曲线
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(121, 188, 249)'
            },
            {
              offset: 1,
              color: '#fff'
            }
          ])
        },
        // 数据
        data: [12000, 8000, 10000, 13000, 9000, 7000, 14000, 12000, 10000, 13000, 11000, 11500]
      }]
    };

    // 4.3 使用指定的配置项和数据显示图表
    myChart.setOption(option)
  </script>
</body>

</html>